<!DOCTYPE html>
<html lang='en'>

	<head>
		<meta charset='utf-8' />
		<title>indoornavigation</title>
		<script src="js/jquery.js"></script>
		<link rel="stylesheet" href="css/bootstrap.css">
		<script src="js/bootstrap.js"></script>
		<link rel="stylesheet" href="css/ol.css" type="text/css">
		<script src="js/ol-debug.js"></script>
	</head>

	<body onload='init();'>
		<div style="position: absolute; top: 50px; left: 80px; width: 300px; height: 100px;">
			<button id="clear">路径清除</button>
			<div id='map_element' style='width:1800px;height:800px;'></div>

		</div>

		<script type="text/javascript">
			var map;
			var startPoint;
			var destPoint;
			var vectorLayer;

			function init() {
				//定义地图边界
				var layers = [
					new ol.layer.Tile({
						source: new ol.source.TileWMS({
							url: 'http://demo.opengeo.org/geoserver/wms',
							params: {
								'LAYERS': 'ne:ne'
							},
							serverType: 'geoserver'
						})
					})
				];
				map = new ol.Map({
					layers: layers,
					target: 'map_element',
					view: new ol.View({
						projection: new ol.proj.Projection({
							code: 'EPSG:900913',
							units: ol.proj.Units.METERS
						}),
						center: [12971103, 4809571],
						zoom: 12
					}),
					controls: ol.control.defaults({
						attributionOptions: {
							collapsible: false
						}
					})
				});
				// The "start" and "destination" features.
				startPoint = new ol.Feature();
				destPoint = new ol.Feature();
				// The vector layer used to display the "start" and "destination" features.
				vectorLayer = new ol.layer.Vector({
					source: new ol.source.Vector({
						features: [startPoint, destPoint]
					}),
					style: new ol.style.Style({
						image: new ol.style.Icon(({
							size: [24, 36],
							anchor: [0.5, 0.75],
							anchorXUnits: 'fraction',
							anchorYUnits: 'fraction',
							src: 'marker.png'
						}))
					})
				});
				map.addLayer(vectorLayer);
				//添加比例尺，单位m  
				var scaleLineControl = new ol.control.ScaleLine();
				scaleLineControl.setUnits(ol.control.ScaleLineUnits.METRIC);
				map.addControl(scaleLineControl);
				//缩放工具条  
				var zoomSilder = new ol.control.ZoomSlider();
				map.addControl(zoomSilder);
				map.on('click', clickMap);
				//清空路径规划结果
				var clearButton = document.getElementById('clear');
				clearButton.addEventListener('click', function(event) {
					// Reset the "start" and "destination" features.
					startPoint.setGeometry(null);
					destPoint.setGeometry(null);
					// Remove the result layer.
					map.removeLayer(result);
				});
			}
			var params = {
				LAYERS: 'tingchechang:tingchechang',
				FORMAT: 'image/png'
			};
			var result;

			function clickMap(event) {
				if (startPoint.getGeometry() == null) {
					// First click.
					startPoint.setGeometry(new ol.geom.Point(event.coordinate));
					console.info(event.coordinate);
				} else if (destPoint.getGeometry() == null) {
					// Second click.
					destPoint.setGeometry(new ol.geom.Point(event.coordinate));
					// Transform the coordinates from the map projection (EPSG:3857)
					// to the server projection (EPSG:4326).
					var startCoord = (startPoint.getGeometry().getCoordinates());
					var destCoord = (destPoint.getGeometry().getCoordinates());
					var viewparams = [
						'x1:' + startCoord[0], 'y1:' + startCoord[1],
						'x2:' + destCoord[0], 'y2:' + destCoord[1]
						//'x1:' + 12952117.2529, 'y1:' + 4836395.5717,
						//'x2:' + 12945377.2585, 'y2:' + 4827305.7549
					];
					params.viewparams = viewparams.join(';');
					result = new ol.layer.Image({
						source: new ol.source.ImageWMS({
							url: 'http://10.16.35.14:8080/geoserver/tingchechang/wms',
							params: params
						})
					});
					console.info(result);
					map.addLayer(result);
				}
			}
		</script>
	</body>

</html>